<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="./script/rem.js"></script>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="./css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <link rel="stylesheet" type="text/css" href="./css/aui-slide.css" />
    <script type="text/javascript" src="./script/aui-slide.js"></script>
    <script type="text/javascript" src="./script/jquery.min.js"></script>
    <script type="text/javascript" src="./script/doT.min.js"></script>
    <script type="text/javascript" src="./script/base.js"></script>
    <script type="text/javascript" src="./script/api.js"></script></head>
    <script type="text/javascript" src="./script/aui-tab.js" ></script>
    <script type="text/javascript" src="./script/jquery-3.2.0.js"></script>
</head>
<body>

    <header class="head" style="padding-top:0.4rem;">
        <div class="head-l" tapmode onclick="closeWin()"><i class="fa fa-angle-left"></i></div>
        <h3>找回密码</h3>
        <div class="head-r"></div>
    </header>
    <div class="head-d" style="padding-top:0.4rem;"></div>
    <ul class="list-input mt20">
        <li>
            <label>手机号码:</label>
            <input type="number" placeholder="请输入手机号码" id="mobile">
            <span onclick="sendCaptcha();" id="sendCodeBtn">发送验证码</span>
        </li>
        <li>
            <label>验证码:</label>
            <input type="number" placeholder="请输入验证码" id="sms_code" onkeyup="checkCaptcha();">
            <div class="check" id="checkCaptcha"></div>
        </li>
    </ul>
    <ul class="list-input mt20">
        <li>
            <label>新密码:</label>
            <input type="password" placeholder="请设置新密码"  id="password">
        </li>
    </ul>
    <div class="btn-1 mt100 mb30" tapmode onclick="fix_pwd()">修改密码</div>


</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/index.js"></script>
<script type="text/javascript">
    apiready = function(){
        captcha = '';
        is_sms_code_correct = 0; // 判断验证码是否正确
    }
    
    // 发送验证码
    function sendCaptcha(){

        var mobile = $api.byId('mobile').value;

        var re = /^1\d{10}$/

        if (re.test(mobile)) {

            // 手机号码符合要求后开始倒计时
            var time = 60;
            var sendCodeBtn = $api.byId('sendCodeBtn');
            var timer = setInterval(function(){    

                time--;
                $api.removeCls(sendCodeBtn, 'active');
                sendCodeBtn.innerText = time + " 秒";
                sendCodeBtn.removeAttribute('onclick');
                if (time==0) {
                  time = 60;
                  clearInterval(timer); 
                  $api.addCls(sendCodeBtn, 'active');
                  sendCodeBtn.innerText = "发送验证码";
                  sendCodeBtn.setAttribute('onclick',"sendCaptcha();");
              }
          },1000);

            api.ajax({
                url: webAddress + '/api/auth/code',
                method: 'get',
                data: {
                    values: { 
                        phone: mobile
                    },

                }
            },function(ret, err){
                if (ret) {
                    // alert( JSON.stringify( ret ) );
                    if(ret.status_code == 200){
                        captcha = ret.data.code;
                        var sms_code = $api.byId('sms_code');
                        sms_code.focus();
                    }
                } else {
                // alert( JSON.stringify( err ) );
                if(err.statusCode == 400){
                    api.toast({
                        msg: err.body.message,
                        duration: 2000,
                        location: 'bottom'
                    });
                }
            }
        });

        } else {
            api.toast({
                msg: '请输入正确的手机号!',
                duration: 2000,
                location: 'bottom'
            });
            var mobile = $api.byId('mobile');
            mobile.focus();
            return false;
        }
    };

    // 校验验证码
    function checkCaptcha(){

        var sms_code = $api.byId('sms_code').value;
        var sms_codeLength = sms_code.length;

        if (sms_codeLength == 4) {
            if (sms_code == captcha) {
                is_sms_code_correct = 1;
                $api.byId('checkCaptcha').innerText = '验证码正确';
            }else{
                is_sms_code_correct = 0;
            }
        }else{
            $api.byId('checkCaptcha').innerText = '验证码错误';
            is_sms_code_correct = 0;
        }
    }

    function fix_pwd() {

        var mobile = $api.byId('mobile').value;
        var sms_code = $api.byId('sms_code').value;
        var password = $api.byId('password').value;

        var re = /^1\d{10}$/
        if(!re.test(mobile)){
            api.toast({
                msg: '请输入正确的手机号!',
                duration: 2000,
                location: 'bottom'
            });
            return false;
        }

        if (!password) {
            api.toast({
                msg: '请输入密码!',
                duration: 2000,
                location: 'bottom'
            });
            return false;
        }

        if (!is_sms_code_correct) {
            api.toast({
                msg: '验证码错误!',
                duration: 2000,
                location: 'bottom'
            });
            return false;
        }

        api.ajax({
            url: webAddress + '/api/auth/forget/password',
            method: 'post',
            data: {
                values: { 
                    phone: mobile,
                    sms_code: sms_code,
                    password: password,
                },
            }
        },function(ret, err){
            if (ret) {
                // alert( JSON.stringify( ret ) );
                if (ret.status_code == 200) {
                    api.toast({
                        msg: ret.message,
                        duration: 2000,
                        location: 'bottom',
                        global: true,
                    });
                }
                api.closeWin();
            } else {
                // alert( JSON.stringify( err ) );
                if (err.statusCode == 400) {
                    api.toast({
                        msg: err.body.message,
                        duration: 2000,
                        location: 'bottom'
                    });
                }
            }
        });
    }
    function closeWin(){
        api.closeWin({
        });
    }
</script>
</html>